<template>
  <table
    class="table border"
    v-loading="loading"
  >
    <thead class="info-head">
      <th
        colspan="1"
        style="border:0"
      >用户信息</th>
      <th style="text-align:right"><i
          class="el-icon-edit"
          :class="[editClass]"
          style="cursor:pointer"
          @click="changeEdit"
        ></i></th>
    </thead>
    <tr>
      <td>昵称：
        <span v-if="!isEdit">
          {{detail.nickname}}
        </span>
        <el-input
          v-model="detail.nickname"
          v-else
        />
      </td>
      <td>手机号码：<span>{{detail.mobile}}</span></td>
    </tr>
    <tr>
      <td>等级：<span
          v-if="detail.level==0"
          class="gray"
        >新人</span>
        <span v-else-if="detail.level==1">初级猎人</span>
        <span
          v-else-if="detail.level==2"
          class="green"
        >中级猎人</span>
        <span
          v-else-if="detail.level==3"
          class="blue"
        >高级猎人</span>
        <span
          v-else-if="detail.level==4"
          class="purple"
        >大师级猎人</span>
        <span
          v-else-if="detail.level==5"
          class="orange"
        >王级猎人</span>
        <span
          v-else-if="detail.level>=6"
          class="red"
        >神话级猎人</span></td>
      <td>余额：{{detail.balance}}</td>
    </tr>
    <tr>
      <td :colspan="2">状态：
        <el-switch
          v-model="detail.status"
          active-text="启用"
          inactive-text="禁用"
          :disabled="!isEdit"
        >
        </el-switch>
      </td>
    </tr>
    <tr>
      <td>注册：<span>{{detail.created_at}}</span></td>
      <td>修改：<span>{{detail.updated_at}}</span></td>
    </tr>
    <tr>
      <td colspan="2">备注：

        <span v-if="!isEdit">{{detail.desc}}</span>
        <el-input
          v-model="detail.desc"
          type="textarea"
          maxlength="255"
          show-word-limit
          v-else
        />

      </td>
    </tr>
    <tr>
      <td colspan="2">
        角色：
        <template v-for="role in detail.roles ">
          <el-tag
          class="r10 pointer"

            size="small"
            :key="role.id"
            @click="see_role(role)"
          >{{role.display_name}}</el-tag>
        </template>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              权限 <el-tooltip
                class="item"
                effect="dark"
                content="用户的实际权限等于该权限加上角色包含的权限"
                placement="top-start"
              >

                <i class="el-icon-info header-icon"></i>
              </el-tooltip>：
            </template>
            <template v-for="permission in detail.permissions ">
              <el-tag
                class="r10"
                size="small"
                :key="permission.id"
              >{{permission.display_name}}</el-tag>
            </template>
          </el-collapse-item>
        </el-collapse>

      </td>
    </tr>
    <tr v-if="isEdit">
      <td
        :colspan="2"
        class="text-center"
      >
        <el-button
          @click="update"
          type="primary"
        >更新</el-button>
      </td>
    </tr>
  </table>
</template>

<script>
import { userInfo, editUser } from "@/api";
import rolePage from "@/view/user/role/components/permissions";
export default {
  data() {
    return {
      detail: {},
      loading: false,
      editLoading: false,
      content: "",
      isEdit: false,
      editClass: "default"
    };
  },
  props: ["pdata"],
  created() {
    this.loading = true;
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {
      userInfo(this.pdata.id, res => {
        this.loading = false;
        this.detail = res.data;
      });
    },
    changeEdit() {
      this.isEdit = !this.isEdit;
      this.editClass = this.isEdit ? "blue" : "default";
    },
    update() {
      this.loading = true;
      let detail = this.detail;
      editUser(
        detail.id,
        {
          nickname: detail.nickname,
          desc: detail.desc,
          status: detail.status * 1
        },
        res => {
          this.loading = false;
          this.isEdit = false;
          if (res.code == 1) {
            this.fetchUserInfo();
          }
        }
      );
    },
    see_role(role) {
      this.$uDialog({
        title: "角色权限-"+role.display_name,
        data: {
          id:role.id,
          isEdit: false
        },
        component: rolePage
      });
    }
  }
};
</script>
